/**
 * Created by hejg on 2018/5/6.
 */
import React, {Component} from 'react';
import {Text, View, TouchableHighlight, StyleSheet} from 'react-native';
import {createBottomTabNavigator, createStackNavigator} from 'react-navigation';
import EarthIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import Style from '../../../components/Style';
import Header from '../../../components/Header';
import HomeScreen from '../../Home';
import IndexScreen from '../../Index';
import MmsScreen from '../../Mms';
import SpecialScreen from '../../Special';
import MapScreen from '../../Map';
import UserDrawerGroup from './components/UserDrawerGroup';
import HomeGroup from './components/HomeGroup';
import ExaminaScreen from '../../Base/Examination'
import ExaminaGroup from './components/ExaminaGroup';
const MainTab = createBottomTabNavigator({
        Home: {screen: HomeScreen},
        Index: {screen: IndexScreen},
        Map: {screen: MapScreen},
        Examina:{screen:ExaminaScreen},
        /*Mms: {screen: MmsScreen},*/
        Special: {screen: SpecialScreen},
    }, {
        tabBarOptions: {
            activeTintColor: Style.color.blue,
            inactiveTintColor: Style.color.black,
            labelStyle:{fontSize:Style.fontSize.middle}
        }
    }
);

class MainTabView extends Component {
    static router = MainTab.router;

    render() {
        return (<View style={{flex:1,backgroundColor:Style.color.white}}>
            <MainTab navigation={this.props.navigation}/>
            <TouchableHighlight style={styles.bulgeTabItemView}
                                underlayColor={Style.color.blue}
                                onPress={() => this.props.navigation.navigate('Map')}>
               {/* <Text style={{fontSize:Style.fontSize.small,color:Style.color.white}}>发现</Text>*/}
               <EarthIcon name={'earth'} color={Style.color.white} size={30}/>
            </TouchableHighlight>
        </View>)
    }
}

export default createStackNavigator({
    MainTabView: {
        screen: MainTabView,
        navigationOptions: ({navigation}) => ({
            header: null
            // headerTitle: 'HeaderTitle',
        }),
    },
    ...UserDrawerGroup,
    ...HomeGroup,
    ...ExaminaGroup,
}, {
    navigationOptions: ({navigation}) => {
        const {params} = navigation.state;
        return {
            header: <Header headerTitle={params ? params.headerTitle : '新页面'}/>
            // title: params ? params.title : 'A Nested Details Screen',
        }
    }
});

const styles = StyleSheet.create({
    bulgeTabItemView: {
        width: 50, height: 50, borderRadius: 25, backgroundColor: Style.color.blue,
        position: 'absolute', bottom: 10, left: '50%', marginLeft: -25, alignItems: 'center', justifyContent: 'center'
    },
});